Namespace("sketch.framework");

(function(fwk, ui) {
    ui.iphone.TabbarItem = klass(ui.common.StackPanel, {
        __type__: "ui.iphone.TabbarItem",

        _constructor: function(){
            this.properties.createProperty("imageSrc", "Image", null)
                .editorTemplate("#editor-imagepicker", "tabbar");
            this.properties.createProperty("label", "Label", "Tabbar Item")
                .editorTemplate("#editor-textbox");
            var active = this.properties.createProperty("active", "Active", false)
                .editorTemplate("#editor-checkbox");

            this.orientation("vertical");
            this.height(ui.iphone.TABBAR_HEIGHT);
            this.width(70);

            var image = new fwk.ImageElement();
            image.horizontalAlignment("center");
            image.canSelect(false);
            this.properties.imageSrc.bind(image.properties.src.bindingPoint);
            this.add(image);

            var label = new ui.iphone.Label();
            label.canSelect(false);
            label.horizontalAlignment("center");
            label.textAlign("center");
            label.font().bold(true);
            label.font().size(8);
            this.properties.width.bind(label.properties.width.bindingPoint);
            this.properties.label.bind(label.properties.text.bindingPoint);
            this.add(label);

            active.bind(function(data){
                if (data.newValue) {
                    label.font().color(fwk.Stroke.White.cssColor);
                }
                else{
                    label.font().color("#939393");
                }
            });

            this.label("Tabbar Item");
            active(false);
        },

        label: function(value){
            return this.properties.label(value);
        },
        imageSrc: function(value){
            return this.properties.imageSrc(value);
        },
        active: function(value){
            return this.properties.active(value);
        },
        canAccept: function(element){
            return false;
        },
        dblclick: function(){
            this.showInplaceEditor(this.properties.label);
        },
        getSnapPoints:function(){
            return null;
        },
        clone: function(){
            return this.shallowCopy();
        }
    });
})(sketch.framework, sketch.ui);